<!--
 * @Description: 文本弹窗共用组件
 * @Author: lixianggang
 * @Date: 2022-11-30 18:27:39
 * @LastEditors: lixianggang
 * @LastEditTime: 2022-12-01 10:26:14
-->
<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div>
            {{ text }}
        </div>
        <div slot="footer">
            <el-button @click="cancel">{{ cancelBtnText }}</el-button>
            <el-button type="primary" @click="confirm" :loading="loading">{{ confirmBtnText }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "DialogText",
    props: {
        title: {
            type: String,
            default: "提示"
        },
        text: {
            type: String,
            default: ""
        },
        width: {
            type: String,
            default: "40%"
        },
        confirmBtnText: {
            type: String,
            default: "确定"
        },
        cancelBtnText: {
            type: String,
            default: "取消"
        },
        visible: {
            type: Boolean,
            default: false
        },
    },
    computed: {
        dialogVisible: {
            get() {
                if (!this.visible) this.loading = false
                return this.visible
            },
            set(val) {
                this.$emit('update:visible', val)
            }
        }
    },
    data() {
        return {
            loading: false
        }
    },
    methods: {
        cancel() {
            this.dialogVisible = false
        },
        confirm() {
            this.$emit("confirm")
            this.loading = true
        }
    }
}
</script>

<style>

</style>